import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { AngularEditorConfig, UploadResponse } from '@kolkov/angular-editor';
import { HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';


@Component({
    selector: 'app-my-editor',
    templateUrl: 'component.html',
    styleUrls: ['./style.component.scss']
})
export class MyEditorComponent implements  OnInit{

    @Input()
    htmlContent: string = '';
    @Output()
    htmlContentChange: EventEmitter<string> = new EventEmitter<string>();

    @Input()
    showToolbar: boolean = false;
    @Input()
    maxHeight: string = 'auto';
    @Input()
    editorName="ckEditor"




    editorConfig: AngularEditorConfig = {
        editable: true,
        spellcheck: true,
        height: 'auto',
        minHeight: '100px',
        maxHeight: this.maxHeight,
        width: 'auto',
        minWidth: '0',
        translate: 'yes',
        enableToolbar: true,
        showToolbar: true,
        placeholder: 'Enter text here...',
        defaultParagraphSeparator: '',
        defaultFontName: '',
        defaultFontSize: '',
        fonts: [
            {class: 'arial', name: 'Arial'},
            {class: 'times-new-roman', name: 'Times New Roman'},
            {class: 'calibri', name: 'Calibri'},
            {class: 'comic-sans-ms', name: 'Comic Sans MS'}
        ],
        customClasses: [
            {
                name: 'quote',
                class: 'quote',
            },
            {
                name: 'redText',
                class: 'redText'
            },
            {
                name: 'titleText',
                class: 'titleText',
                tag: 'h1',
            },
        ],
        uploadUrl: 'v1/image',
        upload: (file: File) => { return new Observable<HttpEvent<UploadResponse>>()},
        uploadWithCredentials: false,
        sanitize: true,
        toolbarPosition: 'top',
        toolbarHiddenButtons: [
        ],
        rawPaste:true
    };

    constructor (
    ) {

    }


    ngOnInit () {
        if (this.htmlContent==null){
            this.htmlContent = "";
        }
        this.editorConfig.showToolbar = this.showToolbar;
        this.editorConfig.maxHeight = this.maxHeight;
    }

    change() {
        this.htmlContentChange.emit(this.htmlContent);
    }

    getGapFillHtml() {
        var randomString = this.generateRandomString(10);
        let count = (this.htmlContent.match(/gapfilling-span/g) || []).length;
        return "<span class='gapfilling-span "+randomString+"'>"+(count+1)+"</span> &nbsp;";
    }

    changeShowToolbar() {
        this.editorConfig.showToolbar = this.showToolbar
    }


    generateRandomString(length: number): string {
        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        let result = '';

        for (let i = 0; i < length; i++) {
            result += characters.charAt(Math.floor(Math.random() * characters.length));
        }

        return result;
    }

    onContentChange($event: string) {
        this.htmlContent = $event;
        this.htmlContentChange.emit(this.htmlContent);
    }
}
